<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<style>
    #Img{
        width: 600px;
        height: auto;
    }
    .main{
        position: relative;
        width: 600px;
        height: auto;
    }
    .Limg{
        width: 50px;
        height: 50px;
        position: absolute;
        left: 0;
        /* top: 50%;*/
        /* 对齐方式 自身高度的一半减25px */
        top:calc(55% - 25px); 
        /* 偏移50% Y轴减去50% */
        transform: translateY(-50%);
        opacity: 0.7;
    }
    .Rimg{
        width: 50px;
        height: 50px;
        position: absolute;
        top: calc(55% - 25px);
        transform: translateY(-50%);
        right: 0;
        opacity: 0.7;
    }   
</style>
<body>
    <div class="main">
        <img src="img1.jpg" alt="显示一张图片" id="Img">
        <img src="left.png" onclick="before()" alt="←" class="Limg">
        <img src="right.png" onclick="next()" alt="→" class="Rimg">
        <!-- <button onclick="before()">上一张</button>
        <button onclick="next()">下一张</button> -->
    </div>
</body>
<script>
    var i = 1;
    // 上一张
    function before(){
        if(i-1<1){
            i = 5;
        }
        i = i - 1;
        document.getElementById("Img").src='img' + i + '.jpg';
    }
    // 下一张
    function next(){
        if(i+1>4){
            i = 0;
        }
        i = i + 1;
        document.getElementById("Img").src='img' + i + '.jpg';
    }
    // 间隔3秒自动切换下一张图
    setInterval(function(){
        next()},3000
    )
</script>
</html>